    export default {
        name: "bloglist",
        setup(props) {
            const router = VueRouter.useRouter();
            const blogs = ref([]);
            const total = ref(0);
            const blogpages = ref({page: 1, pageSize: 10, gjc: ''});
            
            onMounted(() => {
                gettable();
            });
            
            //翻页
            const handleCurrentChange = (val) => {
                blogpages.value.page = val;
                gettable();
            };
            
            //分页获取数据
            const gettable = async (fl = '') => {
                document.title = '公告文章列表';
                const res = await qtgetbloglist(blogpages.value);
                blogs.value = res.items;
                total.value = res.total;
            };
            
            //返回首页
            const goHome = () => {
                router.push({ name: 'home' });
            }

            return {
                blogs,
                goHome,
                gettable,
                blogpages,
                total,
                handleCurrentChange,
            };
        },
        
        template: `
        <div class="content">
            <h2 style="display: flex; align-items: center;">
                <el-icon @click="goHome" style="color: #5c9cf1;"><HomeFilled></HomeFilled></el-icon>
                <span>公告文章列表</span>
            </h2>
            <div>
                <input class="wzinput" v-model="blogpages.gjc" placeholder="搜索标题..." />
                <ul v-if="total > 0">
                    <li v-for="blog in blogs" :key="blog.ID">
                        <router-link :to="{ name: 'blogview', params: { id: blog.ID } }">{{ blog.Title }}</router-link>
                        <div class="meta">作者: {{ blog.Cjz }} | 阅读次数: {{ blog.IsRead }}</div>
                    </li>
                </ul>
            </div>
    
            <div style="margin-top: 10px;" v-if="total > 0">
                <el-pagination background :page-size="blogpages.pageSize" @current-change="handleCurrentChange" :total="total" :current-page.sync="blogpages.page"></el-pagination>
            </div>
            <el-backtop :right="100" :bottom="100"></el-backtop>
        </div>
        `
    }
